<template>
  <div class="wrapper">
    <common-loading v-if="loading"></common-loading>
    <van-empty v-show="Null"
      class="custom-image"
      description="当前暂无发布记录"
      :image="nullImg"
    />
    <ul>
        <li v-for="(item, index) in list" :key="index" :id="item.store_id">
            <div class="title" @click="tiao(item.store_id)">{{item.store_title}}</div>
            <div class="hui_zi zi_26" @click="tiao(item.store_id)">期望行业：<span class="hei_zi">{{item.store_category}}/{{item.categoryclass}}</span></div>
            <div class="hui_zi zi_26" @click="tiao(item.store_id)">期望区域：<span class="hei_zi">{{item.store_quyu}}</span></div>
            <div class="hui_zi zi_26" @click="tiao(item.store_id)">期望租金：<span class="hong_zi jiacu">{{item.store_money}}</span><span class="hei_zi">/月</span></div>
            <div class="hui_zi zi_26" @click="tiao(item.store_id)">期望面积：<span class="hong_zi jiacu">{{item.store_area}}㎡</span></div>
            <div class="bottom_info">
                <div class="zi_26 hui_6">收藏时间：{{getTime(item.createtime)}}</div>
                <div class="operation" @click="xiajia(item.store_id)">取消收藏<span class="iconfont icon-favourited"></span></div>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import {formatDate} from '../../../utils/formatDate.js'
import CommonLoading from '../../../common/Loading'
export default {
  name: 'CompanyRent',
  components: {
    CommonLoading
  },
  data () {
    return {
      loading: true,
      Null: false,
      nullImg: require('../../../assets/img/null.png'),
      is_fabu: false,
      list: []
    }
  },
  mounted () {
    this.postList()
  },
  methods: {
    tiao (id) {
      this.$router.push('/shopDetails/' + id)
    },
    xiajia (id) {
      this.$axios.post(process.env.API_HOST + '/api/vip/create_collection', {
        store_id: id,
        type: 2,
        flag: 2
      }).then(this.xiajiaSucc)
        .catch(error => console.log(error))
    },
    xiajiaSucc (res) {
      if (res.data.code === 1) {
        this.$toast('取消收藏成功')
        setTimeout(function () {
          location.reload()
        }, 1500)
      }
    },
    getTime (updatetime) {
      updatetime = updatetime * 1000
      let date = new Date(updatetime)
      return formatDate(date, 'yyyy/MM/dd')
    },
    postList () {
      this.loading = true
      this.$axios.post(process.env.API_HOST + '/api/vip/user_collection', {
        type: 2
      }).then(this.postListSucc)
        .catch(error => console.log(error))
    },
    postListSucc (res) {
      if (res.data.code === 1) {
        this.loading = false
        this.list = res.data.data.lists
        if (res.data.data.count < 1) {
          this.Null = true
        } else {
          this.Null = false
        }
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  min-height 100%
  background #f8f8f8
  padding-top 1rem
  ul
    li
      width 100%
      min-height 3rem /* 150/50 */
      padding .3rem /* 15/50 */ .4rem /* 20/50 */
      background #fff
      margin-bottom .2rem /* 10/50 */
      position relative
      .title
        font-size .32rem /* 16/50 */
        max-width 80%
        font-weight bold
        text-overflow -o-ellipsis-lastline
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 1
        line-clamp 1
        -webkit-box-orient vertical
        line-height .52rem /* 26/50 */
        margin-bottom .1rem /* 10/50 */
.bottom_info
  display flex
  justify-content space-between
  margin-top .15rem /* 15/50 */
  height .26rem /* 13/50 */
  .operation
    color #666666
    font-size .26rem /* 13/50 */
    span
      background linear-gradient(90deg, #FFCC00, #FFC000)
      -webkit-background-clip text
      -webkit-text-fill-color transparent
      text-shadow 1px 1px 5px rgba(227, 179, 13, 0.42)
      margin-left .1rem /* 5/50 */
  .van-empty
    padding 1.2rem /* 60/50 */ 0
    /deep/ .van-empty__image
      width 5.64rem /* 282/50 */
      height 4.72rem /* 236/50 */
      img
        width 100%
        height auto
    /deep/ .van-empty__description
      margin-top -.76rem /* 38/50 */
      padding 0px
      padding-left .26rem /* 13/50 */
      font-size .3rem /* 15/50 */
      color #656565
</style>
